import { getRawProps } from '@ibiz-template/vue3-util';
import { defineComponent } from 'vue';
import { Controller } from './controller';

export const ListIcon = defineComponent({
  name: 'ListIcon',
  props: getRawProps<Controller>(),
  setup(props) {
    const _name: string = props.controller.model.id || '';
    let _value = '';
    if (props.controller.data) {
      _value = props.controller.data[_name];
    }
    return {
      _name,
      _value,
    };
  },
  render() {
    if (Object.is(this._name, 'icon')) {
      return (
        <div class='index-data-list-pamel-item'>
          {this._value ? (
            <i class={`${this._value} fa-3x`}></i>
          ) : (
            <i class='fa fa-file-code-o fa-3x'></i>
          )}
        </div>
      );
    }
    return (
      <div class='index-data-list-pamel-item'>
        {this._value && Array.isArray(this._value) && this._value.length > 0
          ? this._value.map((item: string) => {
              return (
                <div class='text'>
                  <i class='fa fa-file-code-p fa-3x'></i>
                  <span>{item}</span>
                </div>
              );
            })
          : null}
      </div>
    );
  },
});
